<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"
        href="http://edu.bluej.cn/public/uploads/20180625/20180625095037ajax-neteasse/ajax-neteasse/css/main.css" />
    <link rel="stylesheet" type="text/css"
        href="http://edu.bluej.cn/public/uploads/20180625/20180625095037ajax-neteasse/ajax-neteasse/css/table.css" />
    <title>网抑云音乐</title>
    <style>
        td:first-child {
            cursor: pointer;
            background-color: #fff;
            transition: all 0.3s;
        }

        td:first-child:hover {
            background-color: rgba(0, 0, 0, .2);
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="div1" class="box box-re form-inline">
        <input type="text" class="form-control" id="keywords" placeholder="搜索歌曲" value="">
        <button class="btn btn-info content" id="send">搜索</button>

        <div style="margin: 10px 0;">
            <button class="btn btn-info content disable" id="prev">上一页</button>
            <button class="btn btn-info content disable" id="next">下一页</button>
        </div>

        <div>
            <audio id="player" src="" controls></audio>
        </div>

        <table class="table table-bordered">
            <thead>
                <td>音乐标题</td>
                <td>歌手</td>
                <td>专辑</td>
                <td>时长</td>
            </thead>
            <tbody class=trList></tbody>
        </table>
    </div>


    <script>
        function ajax({
            method: _method,
            url: _url,
            data: _data,
            callback: _callback
        }) {
            const xhr = new XMLHttpRequest();

            if (_method.toUpperCase() === 'GET') {
                let newUrl = _url + '?';
                for (let k in _data) {
                    newUrl += `${k}=${_data[k]}&`
                    newUrl = newUrl.slice(0, -1);
                    xhr.open("GET", newUrl, true);
                    xhr.send(null);
                }
            } else {
                let postData = "";
                for (let k in _data) {
                    postData += `${k}=${_data[k]}&`
                    postData = newUrl.slice(0, -1);
                    xhr.open(_method, _url, true);
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xhr.send(postData);
                }
            }

            xhr.addEventListener("readystatechange", () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        let tempData;
                        try {
                            tempData = JSON.parse(xhr.response);
                        } catch (error) {
                            tempData = xhr.response;
                        }
                        _callback(tempData)
                    }
                }
            })
        }

        let input = document.querySelector("input");
        let trList = document.querySelector(".trList");
        let tr = document.createElement("tr");
        let player = document.querySelector("#player");
        let btn = document.querySelector(".btn");

        btn.addEventListener("click", (e) => {
            ajax({
                method: 'GET',
                url: 'http://netease.0melon0.cn/search',
                data: {
                    keywords: input.value
                },
                callback: function (data) {
                    console.log(data);
                    let songList = data.result.songs;
                    songList.forEach(function (item) {
                        let tr = document.createElement("tr");
                        tr.innerHTML = `<td data-index="${item.id}">${item.name}</td>
                                <td>${item.artists[0].name}</td>
                                <td>${item.album.name}</td>
                                <td>${parseInt(item.duration / 60000) + ':' + parseInt(item.duration / 1000 % 60)}</td>`;
                        trList.appendChild(tr);
                    })

                }
            })

        })

        trList.addEventListener("click", function (e) {
            if (e.target == e.target.parentNode.querySelector('td:first-child')) {
                console.log(e.target.dataset.index);
                player.src = `https://music.163.com/song/media/outer/url?id=${e.target.dataset.index}.mp3`
            }
        })
    </script>
</body>

</html>